<template>
  <view class="select-statistics">
    <text class="label">{{ label }}</text>
    <view class="slider-container">
      <view class="slider-box">
        <view class="slider" :style="{ width: formatToFixed(ratio * 100,0) + '%' }"></view>
      </view>
      <view class="text">
        <text>{{ formatToFixed(ratio * 100,0) }}%</text>
        <text>{{ num }}票</text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { formatToFixed } from '@/utils/number';

  defineProps({
    label: { type: String, default: '' },
    num: {
      type: Number,
      default: 50,
    },
    ratio: {
      type: Number,
      default: 50,
    },
  });
</script>
<style lang="scss" scoped>
  .select-statistics {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    margin-top: 32rpx;
    .label {
      font-size: 28rpx;
      line-height: 40rpx;
      word-break: break-all;
    }
    .slider-container {
      display: flex;
      gap: 24rpx;
      align-items: center;
      .slider-box {
        width: 442rpx;
        height: 12rpx;
        border-radius: 8rpx;
        background: #d0f7ff;
        .slider {
          height: 100%;
          border-radius: 8rpx;
          background: #2878ff;
        }
      }
      .text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24rpx;
        font-size: 28rpx;
        color: #999996;
        line-height: 40rpx;
        flex: 1;
        white-space: nowrap;
      }
    }
  }
</style>
